<template>
  <div class="playlist-detail">
    <!-- 132465 -->
    <div class="pic">
      <van-icon name="arrow-left" @click="goBack" />
      <h2>{{ djRadios[1].category }}</h2>
      <!-- <div class="pic_header">
        <img :src="picUrl" alt="" name="play" />
        <span>{{ rcmdText }}</span>
      </div> -->
      <div class="synopsis">
        <span> {{ desc }}</span>
      </div>
    </div>
    <div class="programs">
      <ul>
        <li v-for="item in djRadios" :key="item.id" @click="selectPlaylist(item)">
          <img :src="item.picUrl" alt="" />
          <div class="con_left">
            <div>{{ item.name }}</div>
            <div>
              {{item.lastProgramName}}
            </div>
            <div class="cont">
              <span>
                <van-icon name="underway-o" /> {{ item.createTime | numFilter(0) }}
              </span>
              <span> <van-icon name="play-circle-o" /> {{ item.subCount }} </span>
              <span> <van-icon name="like-o" /> {{ item.programCount }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      djRadios: [],
      picUrl: "",
      title: "",
      test: "",
      rcmdText: "",
      desc: "",
    };
  },
  created() {
    this.gerDetail();
  },
  methods: {
    gerDetail() {
      axios
        // .get("/api/dj/recommend/type?type="+ params: {
        //     rid: this.$route.params.id,
        //   },) //  电台 - 推荐类型

        .get("/api/dj/recommend/type", {
          params: {
            type: this.$route.params.type,
          },
        })
        .then((res) => {
          // console.log("1");
          console.log(res);
          console.log(  res.data.djRadios);
          this.djRadios = res.data.djRadios;
          // this.title = res.data.data.name;
          // this.rcmdText = res.data.data.rcmdText;
          // this.picUrl = res.data.intervenePicUrl;
          // this.desc = res.data.data.desc;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    goBack() {
      let that = this;
      that.$router.go(-1);
    },
    selectPlaylist(item) {
      let that = this;
      const id = item.id;
      that.$router.push({
        path: `/detail/${id}`,
      });
    },
  },
  filters: {
    numFilter(value, num) {
      // 先把传参毫秒转化为new Date()
      console.log(num);
      const dt = new Date(value);
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, "0");
      return `${m}-${d}`;
     
    },
  },
};
</script>

<style scoped>
.pic {
  position: relative;
}

.pic_header {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pic_header > img {
  height: 50px;
  border-radius: 50%;
  margin-right: 20px;
}
.synopsis {
  display: flex;
  justify-content: center;
  font-size: 12px;
  width: 60vw;
  margin: 20px auto;
}
.van-image {
  height: 275px;
  width: 100%;
}

.pic > .van-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  font-size: 40px;
}
.programs > ul > li {
  display: flex;
  justify-content: flex-start;
 margin: 20px 0 20px 9vw;
}

.programs > ul > li > img {
  height: 80px;
  border-radius: 10px;
  margin-right: 20px;
}


.con_left  > div{
  margin-top: 2.5vw;
  text-align: left;
}
.con_left >:nth-of-type(1){
  font-size: 18px;

}
.con_left >:nth-of-type(2){
  font-size: 15px;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  
}
.con_left >:nth-of-type(3){
  font-size: 12px;
}
.cont {
  width: 200px;
  display: flex;
  justify-content: space-between;
}
</style>
